<template>
	<view class="page padding-lr padding-top-sm" v-if="user">
		<view class="space margin-bottom-sm bg-white">
			<view class="title flex align-center justify-between">
				<view class="left"> {{sizeTostr(user.used_storage)}}/{{sizeTostr(Number(user.money.money3))}}</view>
				<view class="right" v-if="user.used_storage > 0 ">已用{{$wanlshop.bcmul(100,$wanlshop.bcdiv(user.used_storage, Number(user.money.money3)).toFixed(2))}}%</view>
			</view>
			<u-line-progress :percent="$wanlshop.bcmul(100,$wanlshop.bcdiv(user.used_storage, Number(user.money.money3)).toFixed(2))" height="14" :show-percent="false" active-color="#4CBD66" inactive-color="#E7E7E7"></u-line-progress>
			<view class="tips flex align-center justify-between">
				<text>空间内存</text>
				<text class="add" @tap="$wanlshop.to('/pages/user/file/file')">增加空间内存</text>
			</view>
		</view>
		<view class="cu-list menu sm-border">
			<view class="cu-item arrow" v-for="(item,index) in list" :key="index" @tap="$wanlshop.to(item.url)">
				<view class="content">
					<image :src="$wanlshop.oss(item.img)" mode="widthFix"></image>
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		computed: {
			...mapState(['user'])
		},
		data() {
			return {
				list:[
					{title:'病例单',url:'/pages/user/file/list?id=191&title=我的病例单',img:'/uploads/staticImage/images/user/files/01.png'},
					{title:'处方记录',url:'/pages/user/file/list?id=192&title=我的处方记录',img:'/uploads/staticImage/images/user/files/02.png'},
					{title:'体检报告',url:'/pages/user/file/list?id=193&title=我的体检报告',img:'/uploads/staticImage/images/user/files/03.png.png'},
					// {title:'健康档案',url:'',img:'/uploads/staticImage/images/user/files/04.png'},
					// {title:'我的硬件',url:'',img:'/uploads/staticImage/images/user/files/05.png'},
					{title:'我的家人',url:'/pages/user/record/treatment/treatment',img:'/uploads/staticImage/images/user/files/06.png'}
				]
			}
		},
		onShow() {
			uni.request({
				url: '/member/user/info',
				method: 'POST',
				success: res => {
					this.$store.commit('user/setUserInfo', res.data);
					this.$store.dispatch('user/setToken', res.data.token);
					this.$u.vuex('vuex_token', res.data.token);
				}
			});
		},
		methods: {
			sizeTostr(bytes, decimal = 2) {
				bytes = bytes * 1048576
				var units = ["B", "KB", "MB", "GB", "TB"];
					for (var i = 1; bytes / Math.pow(1024, i) >= 1; i++) {
				}
				return (bytes / Math.pow(1024, i-1)).toFixed(decimal) + units[i-1];
			}
		}
	}
</script>

<style lang="less">
page {
	background-color: #EDEDED;
}
.menu {
	.cu-item {
		&:nth-child(1) {
			border-radius: 16rpx 16rpx 0 0;
		}
		&:last-child {
			border-radius: 0 0 16rpx 16rpx;
		}
	}
}
.content {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	image {
		width: 32rpx !important;
		height: 32rpx;
	}
}

.space {
	padding: 16rpx 26rpx 14rpx 26rpx;
	border-radius: 16rpx;
	.title {
		.left {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 40rpx;
		}
		.right {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 34rpx;
		}
	}
	.tips {
		text {
			&:nth-child(1) {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 34rpx;
			}
			&:nth-child(2) {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #4CBD66;
				line-height: 40rpx;
			}
		}
	}
}
</style>
